<template>
  <div>
    <el-container class="questionlist">
      <el-main class="question-list-main">
        <el-scrollbar>
          <el-table class="question-list-table" :data="list" style="width: 100%" @row-click="rowClick"
            :row-class-name="rowClassName">
            <el-table-column prop="ID" label="题号" width="">
              <template #default="{ row, index }">
                <span>{{ row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="题型"></el-table-column>
            <el-table-column prop="" label="得分">
              <template #default="{ row: v, index }">
                <!-- CE 的得分是 null -->
                <el-tag class="df" v-if="v.userquestion?.hasOwnProperty('df')" v-text="v.userquestion?.df || 0"
                  effect="dark" size="default">
                </el-tag>
                <el-tag class="df" v-else v-text="'-'" effect="dark" size="default">
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="" label="我的提交" show-overflow-tooltip width="">
              <template #default="{ row: v, index }">
                <!-- <el-tag v-if="v.userquestion?.df" v-text="v.userquestion?.df" size="default">
                </el-tag> -->
                <el-tag class="submit-status" v-if="v.userquestion" type="success" effect="dark" size="default">
                  已提交
                </el-tag>
                <el-tag class="submit-status" v-else type="info" size="default">未提交</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import Studycodemodel from '../../../mysql_interface/studycodemodel';

type P = {
  questions: Studycodemodel.Iquestion[],
  index?: string | number
  routername: string
  userquestion: Studycodemodel.Iuserquestion[]
}
const p = defineProps<P>()

const emits = defineEmits(['update:listshow'])

const list = computed(() => {
  return p.questions.map(f => {
    const userquestion = p.userquestion.find(z => z.questionid === f.ID)
    // CE的题目得分是 null
    return { ...f, userquestion, }
  })
})

// watch(() => p.index, (e: number) => {
//   selectedRow.value = list[e]
// })

// 
const router = useRouter()
const selectedRow = ref<Studycodemodel.Iquestion>();
function rowClick(row: any, column: any, event: Event) {
  const to = { params: { index: row.rowIndex }, }
  router.push(to)
  // 点击后隐藏列表
  emits('update:listshow', false)
}

function rowClassName({ row, rowIndex }: { row: Studycodemodel.Iquestion, rowIndex: number }): string {
  row.rowIndex = rowIndex
  let className = 'cursor-pointer'
  if (selectedRow.value == row || rowIndex == p.index) {
    className = 'highlight-row cursor-pointer';
  }
  return className;
};

</script>

<style scoped>
.questionlist {
  /* height: 80vh; */
  padding: var(--container-margin)*2 0;

  --container-margin: 20px;
}

.question-list-main {
  padding: 0
}

.question-list-table {
  /* header nav height:64px */
  height: calc(100vh - 64px - var(--container-margin)*4);
  padding-top: 0;
  padding-bottom: 0;
}

.df,
.submit-status {
  margin: 4px;
  padding: 0 10px;
  box-sizing: border-box;
  width: 50px;
  height: 28px;
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
</style>

<style>
#match-header-container .el-drawer.ltr {
  top: 100px;
  height: calc(100vh - 100px);
}
</style>